<template>
    <div class="main">
        <div class="filter-box">
            <div class="filter-left">
                <el-input
                    v-model.trim="value"
                    maxlength="20"
                    style="width: 300px"
                    size="mini"
                    placeholder="请输入区域名称"
                ></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
            </div>
            <div class="filter-right">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleOpenAddDialog">添加</el-button>
                <el-button type="primary" size="mini" icon="el-icon-delete" @click="handDeleteAll">删除</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            v-loading="loading"
            stripe
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            height="100%"
            :data="tableData"
            tooltip-effect="dark"
            align="center"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" fixed="left"></el-table-column>
            <el-table-column prop="name" label="区域名称" min-width="180"></el-table-column>
            <el-table-column prop="description" label="区域描述" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="180"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑区域" placement="bottom-start">
                        <el-button size="mini" type="danger"
                                   @click="handleOpenUpdateDialog(scope.row)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加/编辑区域  -->
        <el-dialog v-el-drag-dialog custom-class="custom-dialog" :visible.sync="dialog" :title="dialogTitleType"
                   width="700px " append-to-body>
            <div style="height: 400px">
                <AddItem v-if="dialog" :is-update="isUpdate" :post-id="currentId"
                         @succeed="handleSucceedAddOrUpdate"
                         @close="handleCloseDialog" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
// components
import AddItem from './addItem'
import { getRegionList, deleteRegionList } from '@/api/region'

export default {
    components: {
        AddItem
    },
    data() {
        return {
            value: '',
            tableData: [],
            loading: true,
            pageSize: 10,
            pageNo: 1,
            total: 0,
            selectOptions: [],
            //弹窗
            dialogTitleType: '',
            dialog: false,
            isUpdate: true, //true为修改，false为不修改
            currentId: '' //修改id
        }
    },
    created() {
        this.getData()
    },
    methods: {
        //获取数据
        getData() {
            this.loading = true
            let obj = {
                pageSize: this.pageSize,
                pageNo: this.pageNo,
                value: this.value
            }
            getRegionList(obj)
                .then((res) => {
                    this.loading = false
                    if (res.status != 200) return
                    this.tableData = res.obj.records
                    this.total = res.obj.total
                })
                .catch((error) => {
                    this.loading = false
                })
        },
        //查询
        handleSearch() {
            this.pageNo = 1
            this.getData()
        },
        //重置
        handleReset() {
            this.value = ''
        },
        //全选
        handleSelectionChange(val) {
            this.selectOptions = val
        },
        //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.getData()
        },
        // 删除
        handDeleteAll() {
            if (!this.selectOptions.length) return this.$msgPrompt.warning()
            this.$confirm(this.$confirmMsg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$startLoading()
                    deleteRegionList(this.selectOptions.map(i => i.id)).then((res) => {
                        this.$endLoading()
                        if (res.status != 200) return this.$msgPrompt.error(res.msg)
                        this.$msgPrompt.success()
                        this.handleSearch()
                    })
                })
                .catch(() => {
                    this.$msgPrompt.info()
                })
        },
        // 开/关弹窗
        handleOpenUpdateDialog(row) {
            this.dialogTitleType = '编辑区域'
            this.isUpdate = true
            this.currentId = row.id
            this.dialog = true
        },
        handleOpenAddDialog() {
            this.dialogTitleType = '添加区域'
            this.isUpdate = false
            this.dialog = true
        },
        handleCloseDialog() {
            this.dialog = false
        },
        // 添加/修改成功
        handleSucceedAddOrUpdate() {
            this.dialog = false
            this.getData()
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;

    .el-select {
        width: 200px;
    }
}
</style>
